'use client';

import { useEffect, useState } from 'react';

interface PackageInfo {
  name: string;
  version: string;
  nextVersion?: string;
  path: string;
}

export default function Dashboard() {
  const [packages, setPackages] = useState<PackageInfo[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPackages = async () => {
      try {
        const packagesData: PackageInfo[] = [
          {
            name: 'app',
            version: '0.1.0',
            nextVersion: '15.5.4',
            path: '/packages/app'
          },
          {
            name: 'app1',
            version: '0.1.0',
            nextVersion: '15.5.4',
            path: '/packages/app1'
          }
        ];
        
        setPackages(packagesData);
      } catch (error) {
        console.error('Error fetching packages:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPackages();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-lg">Loading dashboard...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-4 sm:p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header Section */}
        <div className="mb-8">
          <div className="flex items-center mb-2">
            <div className="bg-blue-600 p-3 rounded-xl shadow-lg mr-4">
              <i className="fa fa-tachometer text-2xl text-white"></i>
            </div>
            <div>
              <h1 className="text-3xl font-bold text-slate-800">Monorepo Dashboard</h1>
              <p className="text-slate-600">Overview of your Next.js packages and versions</p>
            </div>
          </div>
        </div>

        {/* Stats Cards */}
        <div className="grid gap-6 lg:grid-cols-3 mb-8">
          <div className="bg-white rounded-2xl shadow-lg p-6 border border-slate-200 hover:shadow-xl transition-shadow duration-300">
            <div className="flex items-center justify-between mb-4">
              <div className="bg-blue-100 p-3 rounded-xl">
                <i className="fa fa-cubes text-xl text-blue-600"></i>
              </div>
              <div className="text-right">
                <div className="text-3xl font-bold text-blue-600">{packages.length}</div>
                <p className="text-slate-600 text-sm">Total Packages</p>
              </div>
            </div>
            <div className="flex items-center text-green-600 text-sm">
              <i className="fa fa-check-circle mr-1"></i>
              <span>All packages active</span>
            </div>
          </div>

          <div className="bg-white rounded-2xl shadow-lg p-6 border border-slate-200 hover:shadow-xl transition-shadow duration-300">
            <div className="flex items-center justify-between mb-4">
              <div className="bg-green-100 p-3 rounded-xl">
                <i className="fa fa-rocket text-xl text-green-600"></i>
              </div>
              <div className="text-right">
                <div className="text-3xl font-bold text-green-600">15.5.4</div>
                <p className="text-slate-600 text-sm">Next.js Version</p>
              </div>
            </div>
            <div className="flex items-center text-green-600 text-sm">
              <i className="fa fa-check-circle mr-1"></i>
              <span>Latest stable version</span>
            </div>
          </div>

          <div className="bg-white rounded-2xl shadow-lg p-6 border border-slate-200 hover:shadow-xl transition-shadow duration-300">
            <div className="flex items-center justify-between mb-4">
              <div className="bg-purple-100 p-3 rounded-xl">
                <i className="fa fa-code text-xl text-purple-600"></i>
              </div>
              <div className="text-right">
                <div className="text-3xl font-bold text-purple-600">2</div>
                <p className="text-slate-600 text-sm">Packages in Sync</p>
              </div>
            </div>
            <div className="flex items-center text-green-600 text-sm">
              <i className="fa fa-check-circle mr-1"></i>
              <span>Version consistency</span>
            </div>
          </div>
        </div>

        {/* Package Details Table */}
        <div className="bg-white rounded-2xl shadow-lg border border-slate-200 overflow-hidden">
          <div className="p-6 border-b border-slate-200">
            <div className="flex items-center">
              <div className="bg-purple-100 p-2 rounded-lg mr-3">
                <i className="fa fa-list-alt text-lg text-purple-600"></i>
              </div>
              <h2 className="text-xl font-semibold text-slate-800">Package Details</h2>
            </div>
          </div>
          
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-slate-50">
                <tr>
                  <th className="text-left py-4 px-6 font-semibold text-slate-600">
                    <i className="fa fa-cube mr-2"></i>
                    Package
                  </th>
                  <th className="text-left py-4 px-6 font-semibold text-slate-600">
                    <i className="fa fa-tag mr-2"></i>
                    Version
                  </th>
                  <th className="text-left py-4 px-6 font-semibold text-slate-600">
                    <i className="fa fa-rocket mr-2"></i>
                    Next.js Version
                  </th>
                  <th className="text-left py-4 px-6 font-semibold text-slate-600">
                    <i className="fa fa-folder mr-2"></i>
                    Path
                  </th>
                  <th className="text-left py-4 px-6 font-semibold text-slate-600">Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
                {packages.map((pkg, index) => (
                  <tr key={pkg.name} className="hover:bg-slate-50 transition-colors duration-200">
                    <td className="py-4 px-6">
                      <div className="flex items-center">
                        <div className="bg-blue-100 p-2 rounded-lg mr-3">
                          <i className="fa fa-cube text-blue-600"></i>
                        </div>
                        <div>
                          <span className="font-medium text-slate-800">{pkg.name}</span>
                          <div className="text-slate-500 text-sm">Package</div>
                        </div>
                      </div>
                    </td>
                    <td className="py-4 px-6">
                      <div className="flex items-center">
                        <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                          {pkg.version}
                        </span>
                      </div>
                    </td>
                    <td className="py-4 px-6">
                      <div className="flex items-center">
                        <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                          {pkg.nextVersion}
                        </span>
                      </div>
                    </td>
                    <td className="py-4 px-6">
                      <div className="text-slate-600 text-sm font-mono">{pkg.path}</div>
                    </td>
                    <td className="py-4 px-6">
                      <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <i className="fa fa-check-circle mr-1"></i>
                        Active
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Quick Actions */}
        <div className="mt-8 grid gap-4 md:grid-cols-3">
          <div className="bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-lg">
            <div className="flex items-center mb-3">
              <i className="fa fa-refresh text-xl mr-3"></i>
              <h3 className="font-semibold">Auto Refresh</h3>
            </div>
            <p className="text-blue-100 text-sm">Real-time updates enabled</p>
          </div>
          
          <div className="bg-gradient-to-r from-green-500 to-green-600 rounded-2xl p-6 text-white shadow-lg">
            <div className="flex items-center mb-3">
              <i className="fa fa-shield text-xl mr-3"></i>
              <h3 className="font-semibold">Security Status</h3>
            </div>
            <p className="text-green-100 text-sm">All packages secure</p>
          </div>
          
          <div className="bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl p-6 text-white shadow-lg">
            <div className="flex items-center mb-3">
              <i className="fa fa-bell text-xl mr-3"></i>
              <h3 className="font-semibold">Notifications</h3>
            </div>
            <p className="text-orange-100 text-sm">Updates will be shown here</p>
          </div>
        </div>
      </div>
    </div>
  );
}